<template>
  <div>
    <div v-for="(mu,i) in menus" :key="mu.name">
      <div class="title">
        <b>{{mu.name}}</b>
      </div>
      <span class="item">
        <li :class="{sel:i==dci && j==dcj}" v-for="(lt,j) in mu.list" :key="lt" @click="onItemClick(i,j)">{{lt}}</li>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dci: 0,
      dcj: 0,
      menus: [
        {
          name: "订单中心",
          list: ["我的订单","赠品订单","超市订单","售后"]
        },
        {
          name: "购物车",
          list: ["我的商品"]
        },
        {
          name: "收藏夹",
          list: ["我的商品"]
        },
        {
          name: "我的财务",
          list: ["费用明细","冲值","提现","积分明细","赠品消费明细"]
        },
        {
          name: "我的推介",
          list: ["推介记录"]
        },
        {
          name: "我的消息",
          list: ["未读消息", "已读消息"]
        },
        {
          name: "个人信息",
          list: ["资料管理", "银行卡","邮寄地址"]
        },
      ]
    };
  },
  methods: {
    onItemClick(i, j) {
      this.dci = i;
      this.dcj = j;
      this.$emit("menu-click", i, j,this.menus[i].name,this.menus[i].list[j]);
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
}
.item {
  color: #666;
}
li {
  margin: 5px;
}
li:hover {
  cursor: pointer;
}
.sel{
    color:red;
}
</style>